<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>物品展示</title>
    <style type="text/css">
        li {
            list-style-type: none;
            /* 去掉li前的点 */
            float: left;
            /*将li设置成做浮动，变为联动*/
        }

        a {
            display: block;
            /*将a变成块状*/
            width: 30vw;
            /*设置块的宽度*/
            height: 50px;
            /*设置块的长度*/
            font-family: Microsoft Yahei;
            line-height: 50px;
            /*设置字体在块中的高度*/
            background-color: #66B3FF;
            margin: 0px 0px;
            /*块里的高宽通过margin设置*/
            color: #fff;
            text-align: center;
            /*字体居中*/
            text-decoration: none;
            /*去掉下划线*/
            font-size: 15px;
            border: 5px;
            border-radius: 2px;
            border-color: black;
        }

        a:hover {
            background-color: #84C1FF;
        }

        .search {
            width: 60vw;
            border-color: cornflowerblue;
            margin-left: 150px;
            margin-top: 40px;
            height: 5vh;
            border-radius: 5px;
        }

        .bot1 {
            margin-top: 25px;
            margin-left: 45px;
            width: 10vw;
            height: 5vh;
            background-color: aquamarine;
            color: honeydew;
            border-radius: 5px;
            border-color: powderblue;
            font-family: Arial, Helvetica, sans-serif;
            font-size: large;
            opacity: 1;
        }

        .kind {
            margin-left: 6vw;
            margin-top: 20px;
            display: flex;
        }

        .smallKind {
            display: block;
            /*将a变成块状*/
            width: 12vw;
            /*设置块的宽度*/
            height: 50px;
            /*设置块的长度*/
            font-family: Microsoft Yahei;
            line-height: 54px;
            /*设置字体在块中的高度*/
            background-color: #66B3FF;
            margin: 0px 0px;
            /*块里的高宽通过margin设置*/
            color: #fff;
            text-align: center;
            /*字体居中*/
            text-decoration: none;
            /*去掉下划线*/
            font-size: 15px;
            border-color: black;
        }

        .bigbox {
            padding: 20px;
            display: flex;
            border: 3px solid 	#D9FFFF;
            width: 80vw;
            border-radius: 5px;
            margin-bottom: 15px;
        }

        .label {
            height: 30vh;
            width: 90vw;
            background-color: white;
            opacity: 0.9;
            border-radius: 5px;
            margin-top: 10px;
            margin-left: 30px;
            margin-bottom: 20px;
            display: flex;
            padding: 10px;
        }

        .bigbigbox {
            margin-left: 7vw;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .info {
            line-height: 40px;
            font-weight: bold;
            font-size: medium;
            margin-left: 20px;
        }

        .name {
            font-size: xx-large;
            font-weight: bolder;
            margin-left: 3vw;
        }

        .time {
            font-size: larger;
            font-weight: bold;
            margin-left: 3vw;
        }

        .bot2 {
            width: 12vw;
            height: 5vh;
            background-color: aquamarine;
            color: honeydew;
            border-radius: 5px;
            border-color: powderblue;
            font-family: Arial, Helvetica, sans-serif;
            font-size: large;
            opacity: 1;
            justify-content: flex-end;
        }
    </style>
</head>

<body>


<div>
    <ul>
        <li><a href="" th:href="@{/market/index}" >物品展示</a></li>
        <li><a href="" th:href="@{/market/chat}">消息记录</a></li>
        <li><a href="" th:href="@{/market/my}">我的咸鱼</a></li>
    </ul>
</div>
<div style="color: white">asdfasdfadsfadsfafd</div>
<div>
    <form>
        <a type="button" class="bot1" href="/market/index" style="background-color:#66B3FF;display:inline;margin-left: 50px;font-size: xx-large;font-weight: bolder;color: white;" th:href="@{/market/index}">返回首页</a>
        <div style="font-size: large;font-weight: bold;margin-left: 20px;display:inline">
            这是对<b th:text="${search_info}">--</b>的搜索结果：
        </div>
    </form>
</div>
<div class="kind">
    <ul>
        <li style="margin-right: 10px; font-family: Microsoft Yahei;
			line-height: 54px;font-size: larger;font-weight: bolder;">可选类别：</li>
        <li><a th:href="@{/market/product(sort_prev=${type},later_info=${later_info},sort_type=1)}" class="smallKind" style="width: 25vw;">
            最近发布</a>
        </li>
        <li><a th:href="@{/market/product(sort_prev=${type},later_info=${later_info},sort_type=2)}" class="smallKind" style="width: 25vw;">
            最高点赞</a>
        </li>
        <li><a th:href="@{/market/product(sort_prev=${type},later_info=${later_info},sort_type=3)}" class="smallKind" style="width: 25vw;">
            最高评论</a>
        </li>
    </ul>
</div>


<div>
    <!-- 下拉框 -->

</div>

<div class="bigbigbox">
    <div class="bigbox" th:each="product:${products}">
        <div class="label" id="label">
            <img style = "height: 30vh; width:15vw;" th:src="@{'http://127.0.0.1:8080/'+${product.picture}}">
            <div style="line-height: 50px; width: 45vw;">
                <div class="name" th:text="${product.productName}">物品名称</div>
                <div style="display: flex">
                    <div class="time" >发布时间:</div>
                    <div class="time" ><b th:text="${product.time}">发布时间</b></div>
                </div>
                <div style="display: flex">
                    <div class="time">价格:</div>
                    <div class="time" th:text="${product.price}">价格</div>
                    <div class="time">元</div>
                </div>
            </div>
            <div style="text-align: right; font-size: large;">
                <a type="button" class="bot2" style="margin-right: 20px;"   href="/market/product/info?product_id=1" th:href="@{/market/product/info(product_id=${product.productId})}">查看详情</a>
                <div style="display: flex">
                    <div style="margin-top:125px">点赞数：</div>
                    <div style="margin-top:125px" th:text="${product.like}">点赞数：1000</div>
                </div>
                <div style="display:flex;">
                    <div style="margin-top:15px" >评论数：</div>
                    <div style="margin-top:15px" th:text="${product.commentNumber}">评论数：200</div>
                    
                </div>
            </div>
        </div>
    </div>
</div>

</body>

</html>
